<template>
	<!-- 健康商城 -->
	<view id="healthyShop">
		<view class="search" @click='C_search'>
			<u-search placeholder="搜索" v-model="keyword" ></u-search>
		</view>
		
		<!-- banner -->
		<u-swiper :list="banner" circular height="320" mode="none"></u-swiper>
		
		<!-- 列表 -->
		<view class="list">
			<view class="title">
				<text class="name">健康风险防控险</text>
				<text class="more" @click="C_more('0')">更多</text>
			</view>
			<view class="cont">
				<view v-for="(item,index) in list0" :key='index' @click="C_listItem(item)">
					<image :src="item.image" mode="aspectFill"></image>
					<view>{{item.name}}</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="title">
				<text class="name">热门推荐</text>
				<text class="more" @click="C_more('1')">更多</text>
			</view>
			<view class="gong">
				<view v-for="(item,index) in list" :key="index" @click="C_listItem1(item)">
					<image :src="item.image" mode="aspectFill"></image>
					<view>
						<view>{{item.name}}</view>
						<view class="price">￥{{item.price}}</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				banner:[],
				list:[],
				list0:[]
			};
		},
		async mounted() {
			let banner = await this.$u.api.JKshopbanner(); //banner
			this.banner = banner.data
			
			let JKmallarticles = await this.$u.api.JKmallarticles(); //健康风险防控与保险推荐介绍
			this.list0 = JKmallarticles.data.list
			
			let JKhotgoods = await this.$u.api.JKhotgoods(); //热门产品/服务
			this.list = JKhotgoods.data
			
		},
		methods:{
			C_more(state){
				let url = state == 0?'./list/list':'./hotList/hotList'
				uni.navigateTo({
					url
				})
			},
			C_listItem(item){
				uni.navigateTo({
					url:'./list/detail/detail?db='+encodeURIComponent(JSON.stringify(item))
				})
			},
			
			C_listItem1(item){
				uni.navigateTo({
					url:'/pages/healthyShop/hotList/detail/detail?id='+item.id
				})
				// uni.navigateTo({
				// 	url:'/pages/healthyShop/hotList/detail/detail?db='+encodeURIComponent(JSON.stringify(item))
				// })
			},
			C_search(){
				console.log(123);
				uni.navigateTo({
					url:'./search'
				})
			}
		}
	}
</script>

<style lang="scss">
	#healthyShop{
		.search{
			border-top: 1px solid #F1F1F1;
			background-color: #FFFFFF;
			padding: 20rpx;
			position: sticky;
			top: 0rpx;
			z-index: 1;
		}
		.list{
			width: 95%;
			margin: 20rpx auto;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			padding: 20rpx;
			image{
				max-height: 200rpx;
				border-radius: 20rpx;
			}
			
			.title{
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #F1F1F1;
				padding: 0 0 20rpx 0;
				margin-bottom: 20rpx;
				.name{
					font-weight: bold;
					position: relative;
					padding-left: 20rpx;
					&::before{
						content: '';
						height: 60%;
						width: 10rpx;
						background-color: #2C63E9;
						position: absolute;
						top: 10rpx;
						left: 0;
						border-radius: 50rpx;
					}
				}
				.more{
					color: gray;
					font-size: 24rpx;
					position: relative;
					padding-right: 20rpx;
					&::before{
						content: '';
						position: absolute;
						right: 0;
						top: 10rpx;
						display: block;
						width: 10rpx;
						height: 10rpx;
						transform: rotate(-45deg);
						border-right: 2px solid #7C7C7C;
						border-bottom: 2px solid #7C7C7C;
						
					}
				}
			}
			.cont{
				display: flex;
				flex-direction: column;
				>view{
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					image{
						width: 50rpx;
						height: 50rpx;
						margin-right: 20rpx;
					}
				}
				
			}
			.gong{
				display: grid;
				grid-template-columns:repeat(3,1fr);
				grid-gap:30rpx;
				overflow: hidden;
				>view{
					overflow: scroll;
					image{
						max-width: 100%;
					}
					.price{
						color: #F1013C;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>
